<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>手机登录</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        /*更改默认值*/
        html,body
        {
            width: 100%;
            height: 100%;
        }
        /*添加背景图片*/
        .main{
            width: 100%;
            height: 100%;
            background: url("./img/1.jpg") 100% 100% no-repeat;
        }
        /*让输入框居中*/
        .loginFrame{
            width: 700px;
            height: 400px;
            background: rgba(0,0,0,0.3);
            position:fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /*添加边框圆角*/
            border-radius: 10px;
            /*添加边距*/
            padding: 50px 0;
            box-sizing: border-box;
            /*添加阴影*/
            box-shadow: 0 0 5px rgba(0,0,0,0.4);
        }
        /*改变盒子下方的输入框位置*/
        .loginFrame > div{
            width: 350px;
            height: 50px;
            margin: 40px auto;
            /*改变字体的颜色*/
            color: white;
        }

        /*改变标题居中，并且改变颜色*/
        .loginFrame > p{
            text-align: center;
            color: white;
            font-size: 25px;
        }

        /*改变输入框文字*/
        .loginFrame > div > span{
            display: inline-block;
            cursor: pointer;
            font-size: 24px;
        }

        /*改变输入框样式*/
        .loginFrame >div input{
            width: 100%;
            height: 30px;
            /*透明色*/
            background: transparent;
            /*消除默认边框*/
            border: none;
            /*添加底部边框*/
            border-bottom: 1px solid white;
            /*清除蓝色点击框*/
            outline: none;
            /*改变文字颜色*/
            color: white;
        }
        /*改变点击登录按钮样式*/
        .loginFrame .enterBut{
            width: 200px;
            height: 50px;
            /*添加圆角*/
            border-radius: 50px;
            /*设置背景颜色 渐变*/
            background-image: linear-gradient( to right ,#c979d4,#fa719d);
            text-align: center;
            padding-top: 10px;
            box-sizing:border-box;
            font-size: 20px;
            cursor: pointer;
        }

        /*给登录按钮添加 鼠标放上效果*/
        .loginFrame .enterBut:hover{
            box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
        }

        /*给输入框提醒文字改变颜色*/
        input::-webkit-input-placeholder{
            color: #BDCADA;
        }
        svg{
            vertical-align: middle;
        }
        img,span{
            vertical-align: middle;
        }
        .tt{
            width: 180px;
            height: 30px;
            font-size: 18px;
            letter-spacing:2px;
            background: #0C0C0C;
            color: #FFFFFF;
            border-radius:20px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
<!--登入界面-->

<!--背景-->

<div class="main">
    <form action="">
        <div class="loginFrame">
            <!--标题-->
            <p class="loginTitle">
                <img th:src="@{img/logo-kjzy.jpg}" alt="" width="50px" height="50px">
                <span> 科院酒店管理系统</span>
            </p>
            <!--电话号码-->
            <div class="user">
                <label >
                    <span>
                        <svg t="1624842252651" class="icon" viewBox="0 0 1024 1024"
                             version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7029" width="20" height="20"><path d="M682.25 465.262c0 16.695 11.115 27.811 27.81 27.811s27.812-11.116 27.812-27.811A167.395 167.395 0 0 0 570.96 298.35c-16.695 0-27.811 11.116-27.811 27.811s11.16 27.812 27.811 27.812a111.597 111.597 0 0 1 111.29 111.289z m111.289 0c0 16.695 11.115 27.811 27.81 27.811s27.812-11.116 27.812-27.811c0-152.984-125.217-278.201-278.2-278.201-16.696 0-27.812 11.16-27.812 27.855s11.16 27.811 27.811 27.811c122.405 0 222.579 100.174 222.579 222.535zM417.976 367.9c30.623-30.579 33.391-77.898 5.58-111.289L337.31 148.134c-27.811-36.16-80.666-41.74-116.869-13.928-2.768 2.812-5.536 2.812-5.536 5.58l-75.13 75.13c-72.318 72.318 30.623 267.041 217.042 453.417C543.15 854.708 735.06 954.88 807.378 885.33l75.13-75.13c33.392-33.391 33.392-86.246 0-116.825l-5.536-5.58-108.52-86.246c-33.348-27.81-80.623-25.043-111.246 5.58l-47.275 47.319c-50.087-30.623-94.593-64.014-133.564-102.941-38.927-38.971-72.275-83.478-102.898-133.565l44.507-50.043z m-38.927-75.13c8.348 11.16 8.348 27.855-2.812 36.203l-61.202 63.97a29.569 29.569 0 0 0-5.536 33.392 721.425 721.425 0 0 0 122.405 164.1 721.512 721.512 0 0 0 164.1 122.405 29.569 29.569 0 0 0 33.39-5.58l63.971-63.97c11.16-11.116 25.043-11.116 36.203-2.769l108.477 89.014s2.768 0 2.768 2.768a26.889 26.889 0 0 1 0 38.971l-75.13 75.13c-36.115 36.115-208.606-55.666-372.75-217.042-164.1-161.332-253.114-336.548-216.955-372.75l77.854-77.899c11.16-8.348 30.623-8.348 38.971 5.58l86.246 108.521z" fill="#ffffff" p-id="7030"></path></svg>
                    </span>
                    <span>电话号码</span>
                    <!--输入框-->
                    <input type="text" placeholder=" Identity">
                </label>
            </div>
            <!--手机验证码-->
            <div class="user">
                <label >
                    <!--输入框-->
                    <input type="text" placeholder=" 请输入验证码">
                    <button type="button" class="tt">点击获取验证码</button>
                </label>
            </div>
            <!--登录按钮-->
            <div class="enterBut">
                <span>登 入</span>
            </div>
        </div>
    </form>

</div>
</div>
<div class="cc"></div>
</body>
</html>